<template>
	<!-- 轮播图 -->
	<slideshow :swiperList='swiperList'></slideshow>
	<!--个人信息 -->
	<view class="person">
		<view class="personal">
			<!-- 头像 -->
			<view class="touxiang">
				<image src="#" mode=""></image>
			</view>
			<!-- 会员名 -->
			<view class="vip_name">
				<view class="vip_nm">tiff</view>
				<view class="vip_type">初级茶粉</view>
			</view>
			<!-- 积分 -->
			<view class="vip_score">
				<view>0</view>
				<view class="vip_font">积分</view>
			</view>
			<!-- 优惠券 -->
			<view class="vip_coupon">
				<view>3</view>
				<view class="vip_font">优惠券</view>
			</view>
			<!-- 会员码 -->
			<view class="huiyuanm">
				<view>
					<image src="../../static/icon/erweima.png" mode=""></image>
				</view>
				<view class="vip_font" @click="toggle">会员码</view>
				<uni-popup ref="popupCoupon" type="center" :animation="false" :maskClick="true" @change="change">
					<view class="popup">
						<view class="touxiang1">
							<image src="#" mode=""></image>
						</view>
						<text>会员码</text>
						<view class="tiaoxinma">
							<image src="../../static/vip_img/tx.png" mode=""></image>
							<text>7777158291256554235589</text>
						</view>
						
							<view class="erweima">
							<image src="../../static/vip_img/ewm.png" mode=""></image>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
	<!-- 服务分类 -->
	<view class="service_box">
		<view class="service bg">
			<view class="diandan">
				<navigator url="../shop/shop" open-type="switchTab" hover-class="other-navigator-hover">
					<image src="../../static/rests/lijidiandan.png" mode=""></image>
					<view class="immediately">
						立即点单
					</view>
					<view class="described">
						即刻点餐，立享优惠
					</view>
				</navigator>
			</view>

			<view class="take-out">
				<image src="../../static/rests/waimai.png" mode=""></image>
				<view class="immediately">
					外卖
				</view>
				<view class="described">
					无接触，放心点
				</view>
			</view>
		</view>
	</view>
	<!-- 积分商城 -->
	<view class="shop_box">
		<view class="shop">
			<navigator url="../points-mall/points-mall" hover-class="navigator-hover">
				<view class="shop_score bg">
					<view class="shop_title">
						<view class="title">
							积分商城
						</view>
						<view class="slogan">
							乐享积分好礼
						</view>
					</view>
					<image src="../../static/rests/pag.png" mode=""></image>
				</view>
			</navigator>
			<view class="shop_aside shop_score bg">
				<view class="shop_title">
					<view class="title">
						周边商城
					</view>
					<view class="slogan">
						百道好物精选
					</view>
				</view>
				<image src="../../static/rests/cup.png" mode=""></image>
			</view>
		</view>
	</view>
	<!-- 广告 -->
	<view class="advertising">
		<image src="../../static/banner/46bf0da34d7c2250680fb9fcc6dff1a4.jpeg" mode=""></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// import {
	// 	onReady
	// } from "@dcloudio/uni-app";
	//存放轮播图数组
	let swiperList = ref([
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ntimg.cn%2Ffile%2F20200820%2F12897125_081615415000_2.jpg&refer=http%3A%2F%2Fpic.ntimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358213&t=f20c748aafcdc3ea561f4f5de081f791',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages01%2F20210929%2F5e3f614c2b4040f7b6e117d64ce91a51.png&refer=http%3A%2F%2Fp4.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358133&t=2432cee543c5ee7b643bcbd17b9b8e37',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.qhimgs3.com%2Ft010742f39fee8fb75a.jpg&refer=http%3A%2F%2Fp3.ssl.qhimgs3.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358180&t=b5176cc154d033a5651e93f17334d722'
	]);
	let popupCoupon = ref(null)
	//获取轮播图数据
	// onReady(async () => {
	// 	let data = await getBannerImg();
	// 	swiperList.value = data;
	// 	console.log(swiperList.value);
	// })
	function toggle() {
		console.log(11111);
		popupCoupon.value.open()
	}

	function change() {

	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}

	.person {
		width: 100%;
		height: 145rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		position: absolute;
		top: 378rpx;
	}

	.personal {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		text-align: center;
	}

	.touxiang {
		width: 82rpx;
		height: 82rpx;
		border-radius: 41rpx;
		background-color: aquamarine;
	}

	.touxiang image {
		width: 82rpx;
		height: 82rpx;
		border-radius: 41rpx;
	}

	.huiyuanm image {
		width: 32rpx;
		height: 32rpx;
		/* border-radius: 16rpx; */
	}

	.vip_name {

		flex: 0.6;
	}

	.vip_nm {
		font-size: 26rpx;
		width: 60rpx;
		line-height: 20rpx;
	}

	.vip_type {
		font-size: 18rpx;
		color: #044ccd;
		width: 108rpx;
		line-height: 30rpx;
		background-color: #e5eef6;
		border-radius: 30rpx;
		text-align: center;
		margin-top: 16rpx;
	}

	.vip_font {
		font-size: 18rpx;
		color: #515151;
		margin-top: 10rpx;
	}

	.vip_score {
		/* border-right: 1rpx solid #eee; */
		width: 78rpx;


	}

	.vip_coupon {
		/* border-right: 1rpx solid #eee; */
		width: 78rpx;
		/* margin-right: 26rpx; */

	}

	/* 服务分类 */
	.service_box {
		width: 100%;
		height: 304rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		margin-top: 118rpx;
	}

	.bg {
		background-color: #fff;
	}

	.service {
		display: flex;
		border-radius: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.diandan {
		width: 50%;
		height: 100%;
		border-right: 1rpx solid #eeeeee;

	}

	.service image {
		width: 118rpx;
		height: 130rpx;
		display: block;
		margin: auto;
	}

	.take-out {
		width: 50%;
		height: 100%;
	}

	.immediately {
		font-size: 32rpx;
		font-weight: bold;
		width: 128rpx;
		height: 30rpx;
		margin: auto;
		margin-top: 16rpx;
		text-align: center;
	}

	.described {
		width: 218rpx;
		font-size: 23rpx;
		margin: auto;
		margin-top: 16rpx;
		color: #333;
		text-align: center;
	}

	/* 积分商城 */
	.shop_box {
		width: 100%;
		height: 200rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.shop {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.shop_score {
		width: 340rpx;
		height: 100%;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
	}

	.shop image {
		width: 72rpx;
		height: 84rpx;
		display: block;
		margin-top: 68rpx;

	}

	.slogan {
		font-size: 22rpx;
		color: #333;
		font-weight: normal;
		margin-top: 10rpx;
	}

	.advertising {
		width: 100%;
		height: 248rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.advertising image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20rpx;
		margin-top: 24rpx;
	}

	.popup {
		background-color: #fff;
		width: 650rpx;
		height: 900rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.touxiang1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: aquamarine;
		position: absolute;
		top: -41rpx;
		left: 275rpx;
	}

	.tiaoxinma image {
		width: 500rpx;
		height: 100rpx;
	}

	.popup>text {
		position: absolute;
		top: 100rpx;
		left: 283rpx;
	}

	.tiaoxinma {
		position: absolute;
		top: 140rpx;
		left: 75rpx;
		width: 500rpx;
		height: 140rpx;
		display: flex;
		text-align: center;
		justify-content: space-between;
		flex-direction: column;
	}
	.erweima image{
		width: 250rpx;
		height: 250rpx;
	}
	.erweima{
		position: absolute;
		top: 400rpx;
		left: 200rpx;
	}
</style>
